<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script type="module">
    // 鼠标右键 open with live server  打开 浏览器  不然会报错跨域

    // 1. 通用导入方式
    // 引入 01_分别暴露.js 模块的内容 
    import * as m1 from "./01_分别暴露.js";    // 把 01_分别暴露.js 里面的所有对外暴露的属性，全部导入到 m1 对象中
    console.log(m1)


    // 2. 解构赋值形式导入，school 和 findJob 是里面对外暴露的属性
    import { school, name, findJob } from "./02_统一暴露.js"
    import { name as nn, run } from "./01_分别暴露.js"    // 导入多个时候，遇到重名的属性，会报错，所以可以使用别名来设置 name
    console.log(school)
    console.log(name);
    findJob()
    console.log(nn);
    // 导入默认暴露时候，不能直接写 default，要加上 as
    import { default as aaa } from "./03_默认暴露.js"
    console.log(aaa);
    console.log(aaa.change);


    // 3. 简便模式暴露，只能针对于默认暴露的文件
    import abc from "./03_默认暴露.js"
    console.log(abc);








  </script>

  <!-- 这种方式也可以引入文件，属于是浏览器使用ES6模块化的方式 -->
  <script src="./03_默认暴露.js"></script>></script>
</body>

</html>